interface ProgressBarProps {
  value: number
  max: number
  dangerThreshold: number
  normalColor: string
  dangerColor: string
  label: string
}

export function ProgressBar({ value, max, dangerThreshold, normalColor, dangerColor, label }: ProgressBarProps) {
  const percentage = (value / max) * 100
  const isDanger = value <= dangerThreshold
  const color = isDanger ? dangerColor : normalColor

  return (
    <div className="w-full max-w-2xl mx-auto mb-6">
      <div className="flex items-center justify-between mb-2">
        <span className="text-white text-sm">{label}</span>
        <span className="text-white text-sm">
          {value}/{max}
        </span>
      </div>
      <div className="w-full bg-gray-700 rounded-full h-3">
        <div
          className="h-3 rounded-full transition-all duration-300"
          style={{
            width: `${percentage}%`,
            backgroundColor: color,
          }}
        />
      </div>
    </div>
  )
}
